<template>
	<view class="exhibition-page">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">园区管理系统</text>
		</view>

		<!-- 展览标题+状态 -->
		<view class="exhibition-title-wrap">
			<text class="main-title">买票买不到？——交给我们一步帮你搞定</text>
			<view class="status-tag" v-if="isOngoing">
				<text class="status-text">正在抢票</text>
			</view>
		</view>

		<!-- 轮播图核心区域（强制渲染） -->
		<view class="swiper-container">
			<swiper indicator-dots autoplay interval="3000" duration="500" circular style="height: 250px;">
				<!-- 轮播图1（路径简化为 static 根目录） -->
				<swiper-item>
					<image class="swiper-img" src="/static/page_index_photo/p4.jpg" mode="widthFix"></image>
				</swiper-item>
				<!-- 轮播图2 -->
				<swiper-item>
					<image class="swiper-img" src="/static/page_index_photo/p6.jpg" mode="widthFix"></image>
				</swiper-item>
				<!-- 轮播图3 -->
				<swiper-item>
					<image class="swiper-img" src="/static/page_index_photo/p6.jpg" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 展览信息 -->
		<view class="exhibition-info">
			<view class="info-item">
				<text class="label">出票时间</text>
				<text class="value">2025-03-18 ~ 2025-04-30</text>
			</view>
			<view class="info-item">
				<text class="label">抢票地点</text>
				<text class="value">8号楼 2层 #2039</text>
			</view>
			<view class="info-item">
				<text class="label">主办单位</text>
				<text class="value">新疆师范大学计算机科学技术学院数据科学与大数据技术22-11班</text>
			</view>
			<view class="info-item">
				<text class="label">承办单位</text>
				<text class="value">2039最后的蛋蛋导师</text>
			</view>
		</view>


		<button class="reserve-btn" @click="handleReserve">我的预约</button>

		<!-- 底部导航 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'workbench' }" @click="switchTab('workbench')">
				<text class="tab-text">工作台</text>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'mine' }" @click="switchTab('mine')">
				<text class="tab-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOngoing: true,
				currentTab: 'home'
			}
		},
		methods: {
			switchTab(tab) {
				this.currentTab = tab;
			},
			handleReserve() {
				uni.navigateTo({
					url: '/pages/reserve/reserve'
				});
			}
		}
	}
</script>

<style scoped>
	/* 页面基础：强制内容居中，清除多余空白 */
	.exhibition-page {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		/* 避免内容垂直居中导致空白 */
	}

	/* 顶部标题 */
	.header {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	/* 展览标题+状态 */
	.exhibition-title-wrap {
		width: 100%;
		max-width: 750px;
		margin-bottom: 20px;
	}

	.main-title {
		font-size: 20px;
		color: #333;
		line-height: 1.4;
		margin-bottom: 10px;
		display: block;
	}

	.status-tag {
		display: inline-block;
	}

	.status-text {
		padding: 6px 14px;
		background-color: #f03d78;
		color: #fff;
		font-size: 14px;
		border-radius: 6px;
	}

	/* 轮播图容器：强制高度，确保渲染 */
	.swiper-container {
		width: 100%;
		max-width: 750px;
		margin-bottom: 20px;
	}

	.swiper-img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* 展览信息 */
	.exhibition-info {
		width: 100%;
		max-width: 750px;
		margin-bottom: 20px;
	}

	.info-item {
		margin-bottom: 16px;
	}

	.label {
		font-size: 16px;
		color: #999;
		margin-bottom: 6px;
		display: block;
	}

	.value {
		font-size: 15px;
		color: #333;
		line-height: 1.5;
	}

	/* 入馆预约按钮 */
	.reserve-btn {
		position: fixed;
		bottom: 80px;
		right: 20px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #f03d78;
		color: #fff;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(240, 61, 120, 0.5);
	}

	/* 底部导航 */
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background-color: #fff;
		border-top: 1px solid #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.tab-item {
		width: 33.33%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tab-text {
		font-size: 14px;
		color: #999;
	}

	.tab-item.active .tab-text {
		color: #f03d78;
		font-weight: bold;
	}
</style>